<template>
  <div>
    <h3 style="text-align: center;">用户管理</h3>
    <!--    表格-->
    <div style="height:250px">
      <el-table :data="cutObj.records" style="width: 100%" border stripe>
        <el-table-column prop="userName" label="用户名"/>
        <el-table-column prop="password" label="密码"/>
        <el-table-column prop="realName" label="真实姓名"/>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button type="danger" size="small" @click="del(scope.row.id)"
            >删除用户
            </el-button
            >
            <el-button type="primary" size="small" @click="showUpdateDialog(scope.row.id)">修改权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页-->
    <div style="margin: 20px">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="cutObj.size"
          background
          layout="prev, pager, next, jumper"
          :total="cutObj.total"
          @current-change="findByItem"
      />
    </div>
    <div style="display: flex;justify-content: space-around">
      <el-button type="primary" @click="showAddDialog">添加新用户</el-button>
      <div>用户名称
        <el-input v-model="name" size="large" style="width: 200px"/>
        <el-button type="primary" @click="findByItem(1)">查询</el-button>
      </div>
    </div>
    <!--添加用户-->
    <el-dialog
        v-model="showAdd"
        title="添加用户"
        width="40%"
    >
      <el-form
          :model="addUserObj"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="addUserObj.userName" style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="addUserObj.realName" style="width: 200px;"/>
        </el-form-item>

        <el-form-item label="拥有角色" prop="roleIdArr">
          <el-checkbox-group v-model="addUserObj.roleIdArr">
            <el-checkbox v-for="item in roleList" :label="item.id" name="roleIdArr" @change="showGrade">
              {{ item.roleName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="拥有权限" style="height: 100px;">
          <span>{{gradeStr}}</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addUser()">
            添加
          </el-button>
          <el-button @click="resetForm" style="margin-left: 50px">重置</el-button>
        </el-form-item>
      </el-form>
      <span style="color: red;margin-left: 100px">{{ errorAddInfo }}</span>

    </el-dialog>

    <!--    修改用户-->

    <el-dialog
        v-model="showUpdate"
        title="添加用户"
        width="40%"
    >
      <el-form
          :model="updateObj"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="用户名" prop="userName">
          <span>{{updateObj.userName}}</span>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <span>{{updateObj.realName}}</span>
        </el-form-item>

        <el-form-item label="单前角色" prop="roleIdArr">
          <el-checkbox-group v-model="updateRoleIdArr">
            <el-checkbox v-for="item in roleList" :label="item.id" name="roleIdArr" @change="showGrade">
              {{ item.roleName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="拥有权限" style="height: 100px;">
          <span>{{gradeStr}}</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUser()">
            添加
          </el-button>
          <el-button @click="resetForm" style="margin-left: 50px">重置</el-button>
        </el-form-item>
      </el-form>
      <span style="color: red;margin-left: 100px">{{ errorAddInfo }}</span>

    </el-dialog>


  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      //用户分页
      cutObj: [],
      name: "",
      currentPage: 1,
      //根据角色id查权限
      gradeIdArr: [],
      gradeStr:"",

      // 添加用户
      showAdd: false,
      errorAddInfo: "",
      addUserObj: {
        roleIdArr: []
      },
      roleList: [],
      rules: {
        userName: [
          {required: true, message: '用户名必须填写', trigger: 'blur'}
        ],
        realName: [
          {required: true, message: '真实姓名必须填写', trigger: 'blur'},
        ],
        roleIdArr: [
          {required: true, message: '必须选择一个角色', trigger: 'change'}
        ]
      },
      //修改用户权限
      showUpdate: false,
      updateObj:{},
      updateRoleIdArr:[],

    }
  },
  methods: {
    findByItem(pageNO) {
      this.currentPage = pageNO;
      axios.get("/project/user/findByItem", {
        params: {
          pageNO,
          name: this.name
        }
      }).then(resp => {
        this.cutObj = resp.data;
      })
    },
    showAddDialog() {
      this.addUserObj = {roleIdArr: []};
      this.errorAddInfo = "";
      this.showAdd = true;
      this.findRole();
    }
    ,
    findRole() {
      axios.get("/project/role/findAll").then(
          resp => {
            this.roleList = resp.data;
          }
      )
    },
    addUser() {

      if (this.addUserObj.userName != "" && this.addUserObj.realName != "" && this.addUserObj.roleIdArr.length != 0) {
        let formObj = new URLSearchParams();
        formObj.append("roleIdArr", this.addUserObj.roleIdArr);
        formObj.append("userName", this.addUserObj.userName);
        formObj.append("realName", this.addUserObj.realName);

        axios.post("/project/user/add", formObj).then(resp => {
          if (resp.data == "ok") {
            this.showAdd = false;
            this.findByItem(1);
          } else {
            this.errorAddInfo = "用户名已存在，请重新输入";
          }
        })
      }
    },
    resetForm() {
      this.addUserObj = {roleIdArr: []};
      this.errorAddInfo = "";
    },
    del(id) {
      axios.get("/project/user/del", {params: {id}}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(this.currentPage);
        } else {
          alert("不能删除自己哦！")
        }
      })
    },
    showGrade() {
      this.gradeStr="";
      let param = new URLSearchParams();
      param.append("roleIdArr", this.addUserObj.roleIdArr);
      axios.post("/project/grade/findByRoles", param).then(resp => {
        let gradeList = resp.data;
        let gradeArr = gradeList.map(n => n.gradeName);
        this.gradeStr=gradeArr.join('、');
      })
    }
    ,
    showUpdateDialog(id) {
      axios.get("/project/user/findById",{params:{id}}).then(resp=>{
        this.updateObj=resp.data;
      })
    },


  }
  ,
  created() {
    this.findByItem(1);
  }
}
</script>

<style scoped>

</style>